<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/hubaoku.css">
    <link rel="stylesheet"  href="css/swiper.min.css">
    <link rel="stylesheet"  href="css/fudong.css">
    <script  src="js/vue.js"></script>
</head>
<body>

<div  class="head">

</div>
<div class="fudongd"></div>
<div id="main">
<div  id="hucontain">
    <div>
    <div><span>所有分类</span><span>></span><span>小学</span><span>></span></div>
    <div class="hubaokus">
        <div><div>学段</div>  <div><div  v-for="(item,index) in sd1"    @click="cxuduan"  :index="index"  :class="index1==index?'actived':''">{{item}}</div></div></div>
        <div  v-if="index1==0"><div>年级</div>  <div><div  v-for="(item,index) in sd"  @click="cnianji"  :index="index"  :class="index2==index?'actived':''">{{item}}</div></div></div>
        <div  v-else-if="index1==1"><div>年级</div>  <div><div  v-for="(item,index) in sdx"  @click="cnianji"  :index="index"  :class="index2==index?'actived':''">{{item}}</div></div></div>
        <div  v-else-if="index1==2"><div>年级</div>  <div><div  v-for="(item,index) in sdg"  @click="cnianji"  :index="index"  :class="index2==index?'actived':''">{{item}}</div></div></div>
        <div><div>科目</div>  <div><div  v-for="(item,index) in kechengs"   @click="ckemu"  :index="index" :class="index3==index?'actived':''">{{item}}</div></div></div>
    </div>

   <div  class="humain">
       <div v-for="(item,index)  in  lists">
           <img  @click="imgssd" class="imgssd"  :index="index" :src="item.src[0]" />
           <span>{{item.title}}</span>
           <span>{{item.date}}</span>
           <span>{{item.xiaoqu}}</span>
           <span>共{{item.src.length}}页</span>
       </div>
   </div>
           <div  class="pagesdd">
             <div class="page"  v-show="show">
               <div class="pagelist">
                <span class="jump"v-show="current_page>1" @:click="current_page--">上一页</span>
                 <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
                <span class="ellipsis"  v-show="efont">...</span>
                 <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
                <span class="ellipsis"  v-show="efont&&current_page<pages-4">...</span>
                 <span class="jump" @click="current_page++">下一页</span>
                <span v-show="current_page<pages-1" class="jump" class="jump" @click="jumpPage(pages)">{{pages}}</span>
                <span class="jumppoint">跳转到：</span>
                 <span class="jumpinp"><input type="text" v-model="changePage"  /></span>
                <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
              </div>
            </div>
        </div>
    </div>
</div>
    <div class="allddd"  :class="stateyulan ==0?'styled':'stylee'">
        <div>
            <div  class="jieshuylan" @click="returns">结束预览</div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"  v-for="item  in lunbos"> <img   :src="item"  /></div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
</div>
<div  class="dibussss"></div>
</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script  type="text/javascript">

    window.onload = function() {
        // 轮播
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            autoplay:true,
            loop:true,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    }

    //引入页面
    $(document).ready(function () {
        $(".head").load("head.html")
        $(".fudongd").load("fudong.html")
        $(".dibussss").load("dibu.html")
    })

    new Vue({
        el:"#main",
        data:{
            index1:0,
            index2:0,
            index3:0,
            sd:["一年级","二年级","三年级","四年级","五年级","六年级"],
            sdx:["初一","初二","初三"],
            sdg:["高一","高二","高三"],
            sd1:["小学","初中","高中",],
            kechengs:["语文","数学","英语","政治","历史","化学","地理","音乐","其他"],

            lunbos:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],
            stateyulan:0,  //预览的状态
            lists:[
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
                {title:"2019暑四年级趣味语文入门精修班",src:["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"],date:"2018年6月12日",xiaoqu:"成都校区"},
            ],
            current_page: 1, //当前页
            pages: 50, //总页数
            changePage:'',//跳转页
            nowIndex:0
    },
        methods:{
            //上面的导航栏
            hoverd:function ($event$event) {
                this.indexs=$event.target.getAttribute("index")
            },
            cxuduan:function ($event) {
                this.index1=$event.target.getAttribute("index")
            },
            cnianji:function ($event) {
                this.index2=$event.target.getAttribute("index")
            },
            ckemu:function ($event) {
                this.index3=$event.target.getAttribute("index")
            },

            jumpPage: function(id) {    // 分页
                this.current_page = id;
            },

            imgssd:function($event){
                this.stateyulan = 1;
                var index=$event.target.getAttribute("index");
                this.lunbos=this.lists[index].src;
            },
            returns:function () {
                console.log(12)
                this.stateyulan = 0;
            }
        },

           computed: {
               show: function () {
                   return this.pages && this.pages != 1
               },
               efont: function () {
                   if (this.pages <= 7) return false;
                   return this.current_page > 5
               },
               indexs: function () {
                   var left = 1,
                       right = this.pages,
                       ar = [];
                   if (this.pages >= 7) {
                       if (this.current_page > 5 && this.current_page < this.pages - 4) {
                           left = Number(this.current_page) - 3;
                           right = Number(this.current_page) + 3;
                       } else {
                           if (this.current_page <= 5) {
                               left = 1;
                               right = 7;
                           } else {
                               right = this.pages;
                               left = this.pages - 6;
                           }
                       }
                   }
                   while (left <= right) {
                       ar.push(left);
                       left++;
                   }
                   return ar;
               },
           }


    })


</script>
</html>